<script lang="ts" setup>
import type { Toc } from '~/components/markdown/plugins';
import CommentList from '~/components/CommentList.vue';
import { articleApi } from '~/utils/api/article-api';

// -------- 定义页面属性 --------
definePageMeta({
	layout: 'header-content-footer',
});

// -------- 查询文章详情 --------
const route = useRoute();
const articleId = Number(route.params.id);
const { data } = await articleApi.getArticleServer(articleId);
const article = data.value?.data;

// -------- 目录 --------
// 用于传给markdown解析库保存返回的目录
const toc = useState<Toc[]>('articleToc');
</script>

<template>
	<div
		v-if="article"
		class="container flex gap-2"
	>
		<div class="my-4 flex-1 w-0">
			<div class="bg-card p-8 rounded-lg">
				<!--    文章信息    -->
				<div class="flex justify-center items-center flex-col">
					<!--     文章标题     -->
					<div class="text-5xl font-medium">
						{{ article.article_title ?? '标题' }}
					</div>
					<!--     文章分类/日期     -->
					<div class="text-xl font-normal text-slate-500 mt-3">
						{{ article.categories.map(item => item.category_name).join('/') }} ·
						{{ useDateFormat(article.update_date, 'YYYY-MM-DD').value }}
					</div>
					<div>
						<!--					<ArticleAuthor /> -->
					</div>
				</div>

				<MarkdownViewer
					v-model="toc"
					:value="article.article_content ?? '' "
				/>
			</div>
			<!--   评论列表   -->
			<CommentList :article-id="articleId" />
		</div>

		<!--  目录列表  -->
		<TocList
			v-if="toc && toc.length>0"
			:toc="toc"
		/>
	</div>
</template>

<style scoped>
</style>
